<template>
  <div class="flex w-full bg-white h-full">
    <div class="pt-2 pl-[19px] w-[340px] h-full">
      <img
        :src="config.img.logoImg.base64"
        alt="logo"
        class="cursor-pointer w-[265px]"
        width="265"
        height="40"
        @click="toHome"
      />
    </div>
    <a-button v-show="scrollFixedStatus" class="mt-[11px] focusTC cursor-pointer" @click="roll(true)"
      ><LeftOutlined class="pb-2"
    /></a-button>
    <div
      ref="divDom"
      class="ml-[2px] mr-[2px] flex items-end w-full h-full text-[15px] scroll-header overflow-x-hidden"
      style="flex: 1"
    >
      <!-- :class="active==i?'active_item':''" -->

      <div
        v-for="(item, i) in pageArray"
        :key="i"
        class="pl-5 pr-6 py-1.5 mr-0.5 rounded-md tab_item text-center flex-shrink-0 cursor-pointer"
        :class="active == i ? 'active_item' : 'clickTC'"
        @click="toPage(item, i)"
      >
        <div class="relative">
          <span class="px-1.5 font-medium">{{ item.name }}</span>
          <close-circle-outlined class="absolute r-0 top-1/2 -translate-y-1/2" @click.stop="closePage(item, i)" />
        </div>
      </div>
    </div>
    <a-button v-show="scrollFixedStatus" class="mt-[11px] focusTC cursor-pointer" @click="roll(false)">
      <RightOutlined class="pb-2" />
    </a-button>
    <a-button class="mt-[11px] focusTC cursor-pointer" @click="Refresh">
      <UndoOutlined class="pb-2" />
    </a-button>
    <a-dropdown :trigger="['click']">
      <a-button class="mt-[11px] focusTC cursor-pointer">
        <DownOutlined class="pb-2" />
      </a-button>
      <template #overlay>
        <a-menu :get-popup-container="triggerNode => triggerNode.parentNode" class="max-h-40 overflow-y-auto scrollbar">
          <a-menu-item @click="closeCurrentPage"> 关闭当前页面 </a-menu-item>
          <a-menu-item @click="closeAllPage"> 关闭全部页面 </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
    <a-button class="mt-[11px] focusTC cursor-pointer" @click="openFullScreen">
      <fullscreen-outlined class="pb-2" />
    </a-button>
  </div>
</template>

<script lang="ts">
import { onBeforeUnmount, onMounted, reactive, ref, toRefs, watch } from 'vue'
import { CloseCircleOutlined, DownOutlined, LeftOutlined, RightOutlined, UndoOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
import { getUCConfig } from 'uc-npm'
import { storeToRefs } from 'pinia'
import useKeepAliveHook from '../store/keepAlive'
export default {
  name: 'Header1',
  components: {
    CloseCircleOutlined,
    LeftOutlined,
    RightOutlined,
    UndoOutlined,
    DownOutlined
  },
  emits: ['reload'],
  setup(props: any, context: any) {
    const router = useRouter()
    const data = reactive({})
    const keepAliveStore = useKeepAliveHook()
    const { pageArray, activePage } = storeToRefs(keepAliveStore)
    const { setPageArray, setKeepAliveExclude } = keepAliveStore
    const refData = toRefs(data)
    const active = ref(0)
    const scrollTop = ref(0) // 记录当前的滚动距离
    const scrollFixedStatus = ref(false)
    const divDom = ref()
    const options = ref({
      attributes: true,
      childList: true,
      subtree: true
    })

    const mutationObserver = new MutationObserver(handleListenChange)
    function handleListenChange() {
      if (divDom.value.offsetWidth == divDom.value.scrollWidth) {
        scrollFixedStatus.value = false
      } else {
        scrollFixedStatus.value = true
      }
    }
    function toHome() {
      router.push('/analysis')
    }
    function toPage(item: any, i: number) {
      activePage.value = i
      router.push(item.url)
    }
    function closePage(item: any, i: number) {
      const now = pageArray.va.findIndex((item: any) => item.url == router.currentRoute.value.fullPath)
      setPageArray(i)

      setKeepAliveExclude(item?.components_name)
      if (i != now) {
        i > now ? (active.value = now) : (active.value = now - 1)
        return
      }
      if (pageArray.value.length > 0) {
        router.push(pageArray.value[pageArray.value.length - 1].url)
      } else {
        router.push('/home')
      }
    }

    // 关闭所有页面
    const closeAllPage = () => {
      closeAllPage()
      router.push('/home')
    }

    // 关闭当前页面
    const closeCurrentPage = () => {
      closePage('c', active.value)
    }

    // 全屏开关
    const openFullScreen = () => {
      // store.commit('setFullScreen', !store.state.FullScreen)
    }

    //点击滚动事件
    function roll(e: any) {
      divDom.value.scrollTo({
        left: e ? 0 : divDom.value.scrollWidth - divDom.value.offsetWidth,
        behavior: 'smooth'
      })
    }
    //监听滚动事件
    const handleScrollHandle = () => {
      scrollTop.value = divDom.value.scrollWidth
    }

    function handleScroll() {
      divDom.value.addEventListener('scroll', handleScrollHandle, true)
    }

    // 刷新页面
    const Refresh = () => {
      context.emit('reload')
      // window.location.reload()
    }

    // 初始化
    onMounted(() => {
      handleScroll()
      mutationObserver.observe(divDom.value, options.value)
    })
    onBeforeUnmount(() => {
      divDom.value.removeEventListener('scroll', handleScrollHandle) // 离开当前组件别忘记移除事件监听
    })

    //监听路由改变
    watch(
      () => router,
      newValue => {
        active.value = pageArray.value.findIndex(
          (item: any) => item.origin_path == newValue.currentRoute.value.matched[1]?.path
        )

        const now = pageArray.value.findIndex(
          (item: any) => item.origin_path == router.currentRoute.value.matched[1]?.path
        )
        roll(now < 5)
      },
      { deep: true }
    )
    return {
      ...refData,
      pageArray,
      active,
      scrollTop,
      scrollFixedStatus,
      divDom,
      options,
      handleScroll,
      toHome,
      toPage,
      closePage,
      roll,
      Refresh,
      closeAllPage,
      closeCurrentPage,
      openFullScreen,
      config: getUCConfig()
    }
  }
}
</script>
<style lang="scss" scoped>
:deep(.ant-btn) {
  border-radius: 0.357rem;
  border: 1px solid #eee;
  height: 36.5px;
}

.tab_item {
  box-sizing: border-box;
  border: 1px solid #eee;
  color: #006ab2;
}
.tab_item:hover {
  background-color: rgba(128, 128, 128, 0.1);
}
.active_item {
  background-color: #bd9e55;
  color: #ffffff;
  border: 1px solid #ffffff;
  // padding-top: 8px;
  // padding-bottom: 8px;
}

.active_item:hover {
  background-color: #0084cf;
  opacity: 1;
}
/*滚动条样式*/
.scroll-header::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 10px;
  display: none;
}
.scroll-header::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.15);
}
.scroll-header::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
</style>
